<template>
  <div>
    <el-container>
      <el-header class="header-container">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo header-content"
            mode="horizontal"
            background-color="#FF5152"
            text-color="#fff"
            active-text-color="#FFD252"
        >
          <el-menu-item index="/systemImp" @click="handleSelect">
            <img width="50px" src="https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/student_System_img/logo1.png" alt="logo">
            <span class="system-name">竞争性关键字推荐算法</span>
          </el-menu-item>

          <el-menu-item index="/main" @click="handleSelect">
            <el-icon :size="40">
              <ElementPlus/>
            </el-icon>
          </el-menu-item>

        </el-menu>
      </el-header>
    </el-container>

  </div>
</template>
<script setup>
import { ref } from 'vue'
import {ElementPlus,House,Service,PartlyCloudy} from "@element-plus/icons-vue/global";
import router from "@/router/index.js";
import {ElMessageBox, ElNotification} from "element-plus";
import {delStorage, getStorage} from "@/utils/localStorage.js";

const activeIndex = ref('1')
const handleSelect = (event) => {
  router.push(event.index.toString())
}

</script>
<style scoped>
.flex-grow {
  flex-grow: 1;
}
.header-container{
  z-index: 100;
  position: fixed;
  padding: 0;
  width: 100%;
}
.header-content{
  margin: 0;
  padding: 0;
  height: 50px;
}
.system-name{
  padding: 0;
  margin-left: 10px;
  color: white;
  font-size: 15px;
  letter-spacing: 3px;
  text-align: center;
}
</style>
